<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <button id="upload">上传</button>
    <input id="file" type="file" />
    <!-- 导入SDK文件 -->
    <script src="https://cdn.jsdelivr.net/npm/@volcengine/tos-sdk@latest/browser/tos.umd.production.min.js"></script>
    <script type="text/javascript">
      const client = new TOS({
        // yourRegion 填写 Bucket 所在地域。以华北2（北京)为例，yourRegion 填写为 cn-beijing。
        region: 'yourRegion',
        // 从 STS 服务获取的临时访问密钥（AccessKey ID 和 AccessKey Secret）。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // 从 STS 服务获取的安全令牌（SecurityToken）。
        stsToken: 'yourSecurityToken',
        // 填写 Bucket 名称。
        bucket: 'examplebucket',
      });

      // 从输入框获取file对象，例如<input type="file" id="file" />。
      let data;
      // 创建并填写Blob数据。
      // const data = new Blob(['Hello TOS']);

      const upload = document.getElementById('upload');

      const headers = {
        // 指定该Object被下载时网页的缓存行为。
        // 'Cache-Control': 'no-cache',
        // 指定过期时间。
        // 'Expires': 'Wed, 08 Jul 2022 16:57:01 GMT',
        // 指定Object的存储类型。
        // 'x-tos-storage-class': 'Standard',
        // 指定Object的访问权限。
        // 'x-tos-acl': 'private',
      };

      async function putObject(data) {
        try {
          // 填写 Object 完整路径。Object 完整路径中不能包含 Bucket 名称。
          // 您可以通过自定义文件名（例如 exampleobject.txt）或文件完整路径（例如 exampledir/exampleobject.txt）的形式实现将数据上传到当前 Bucket 或 Bucket 中的指定目录。
          // data 对象可以自定义为 File 对象、Blob 数据。
          const result = await client.putObject({
            key: 'exampledir/exampleobject.txt',
            body: data,
            // headers,
          });
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      }

      upload.addEventListener('click', () => {
        data = document.getElementById('file').files[0];
        putObject(data);
      });
    </script>
  </body>
</html>
